<template>
  <div class="c-bg-sgray c-pb40 container">
    <div class="c-ph24 c-pt20 c-bg-white c-pb10" v-if="homeWorkInfo.name">
      <div class="c-fs28 c-fc-xblack  c-text-ellipsis1" v-if="homeWorkInfo.name">{{homeWorkInfo.name}}</div>
    </div>
    <div class="c-bg-white">
      <div v-if="homeWorkInfo.cover" class="c-text-hidden c-ph24">
        <img class="c-w100 c-br12" :class="cfg.isCopyPicture == 0 ? 'imgCloseBig' : ''" :src="$addXossFilter(homeWorkInfo.cover)" alt="" />
      </div>
      <clock-course-detail-com class="c-pb30" v-if="homeWorkInfo.description && homeWorkInfo.description.length > 0 && (homeWorkInfo.cover != '' || (homeWorkInfo.description.length == 1 ? homeWorkInfo.description[0].content != '' : true))" :status='0' :description='homeWorkInfo.description' @clickShowDesc='clickShowDesc' @clickShowVideo='clickShowVideo'>
      </clock-course-detail-com>
    </div>
    <div class="c-ph28 c-pt20 ">
      <div class="c-bg-white c-br20 c-pt30">
        <div v-for="(item,index) in formList" :key="index" class="c-pb40 c-ph20">
          <div v-if="item.type==1">
            <div class="c-fs24  c-wb-ba c-mb20">
              <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
              <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}.</span>
              <span class="c-lh30  c-fs24 c-fw700" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="item.title"></span>
            </div>
            <iptBlanks :fillVal="item.value" @changeVal="changeVal" :formLindex="index"></iptBlanks>
          </div>
          <div v-if="item.type==2">
            <div class="c-fs24  c-wb-ba c-mb20">
              <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
              <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}. </span>
              <span class="c-lh30  c-fs24 c-fw700" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="item.title"></span>
            </div>
            <clock-pic :uploadImgList="item.value" :formLindex="index" @changeVal="changeVal"></clock-pic>
          </div>
          <div v-if="item.type==4">
            <div class="c-fs24  c-wb-ba c-mb20">
              <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
              <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}. </span>
              <span class="c-lh30  c-fs24 c-fw700" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="item.title"></span>
            </div>
            <clock-voice :clockInInfo="homeWorkInfo" :uploadAudioList="item.value" :formLindex="index" @changeVal="changeVal"></clock-voice>
          </div>
          <div v-if="item.type==3">
            <div class="c-fs24  c-wb-ba c-mb20">
              <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
              <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}. </span>
              <span class="c-lh30  c-fs24 c-fw700" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="item.title"></span>
            </div>
            <clock-video :uploadVideoList="item.value" :formLindex="index" @changeVal="changeVal"></clock-video>
          </div>
          <div v-if="item.type==5">
            <div class="c-fs24  c-wb-ba c-mb20">
              <span class="fl c-lh30 c-fc-xmlred c-mr6" v-if="item.isRequire==1">* </span>
              <span class="fl c-lh30 c-fs24 c-fw700 c-mr6">{{index+1}}.【单选题】 </span>
              <span class="c-lh30  c-fs24 c-fw700" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="item.title"></span>
            </div>
            <single-choice :optionsList="item.options" :userAnswer="item.value" :formLindex="index" @changeVal="changeVal"></single-choice>
          </div>
        </div>
        <div v-if="isDisCheat==2" class="c-mh24 c-bg-white c-flex-row c-justify-sb c-pb10  c-aligni-center c-br20">
          <div class="c-fs20 c-fc-xblack">打卡可见范围</div>
          <div class="c-fs20 c-fc-gray c-flex-row ">
            <div class="c-bd1-mgray c-pv6 c-ph18 c-mr20 c-br24 c-fw600" :class="enableShow==1?'theme-bd1 theme-bg-10 theme-fc':''" @click="enableShowAll">所有人</div>
            <div class="c-bd1-mgray c-pv6 c-ph18 c-br24 c-fw600" :class="enableShow==0?'theme-bd1 theme-bg-10 theme-fc':''" @click="enableShowOne">仅老师</div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-box-shadow9 c-flex-row c-ph24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white">
      <div class="c-hh64 c-fs26 c-flex-column c-aligni-center c-fc-white c-justify-sa theme-bg c-w100 c-br32" @click="clickpost">提交</div>
    </div>
  </div>
</template>

<script>
import ClockCourseDetailCom from "@/components/templates/clockIn/clockCourseDetailCom.vue";
import iptBlanks from "@/components/templates/clockIn/iptBlanks.vue";
import clockPic from "@/components/templates/clockIn/clockPic.vue";
import clockVoice from "@/components/templates/clockIn/clockVoice.vue";
import clockVideo from "@/components/templates/clockIn/clockVideo.vue";
import singleChoice from "@/components/templates/clockIn/singleChoice.vue";
let isLoading = false
import {
  utilJs
} from "@/utils/common.js";
export default {
  name: "clockForm",
  components: {
    ClockCourseDetailCom,
    iptBlanks,
    clockPic,
    clockVoice,
    clockVideo,
    singleChoice
  },
  props: [],
  data() {
    return {
      cfg: JSON.parse(localStorage.getItem("cfg")),
      homeWorkInfo:{},
      showDesc:false,
      currentVideoObj:{},
      showVideo:false,
      workType:1,
      curSelectDate: "", //当前日历打卡日期
      formList:[],
      ttId: "", //营期ID
      tpId: "", //环节ID
      tlId: "", //课时ID
      ckFrom:'',
      isDisCheat:0,
      examMainId:'',
      enableShow:1,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    enableShowAll() {
      this.enableShow = 1
    },
    enableShowOne() {
      this.enableShow = 0
    },
    getBaseConfig() {
      let postUrl = `${global.apiurl}signCard/getBaseConfig?signColId=${this.clockId}`;
      utilJs.getMethod(postUrl, (res) => {
        this.isDisCheat = res.isDisCheat
      });
    },
    changeVal(index, val) {
      this.formList[index].value = val
      console.log(this.formList)
    },
    clickShowDesc(isShow) {
      this.showDesc = isShow;
    },
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    //获取作业本信息
    getHomeWorkDatail() {
      utilJs.getMethod(
        global.apiurl + "signCard/homeworkDetail/" + this.curHwId,
        (res) => {
          this.homeWorkInfo = res;
          this.formData()
        }
      );
    },

    //获取日历打卡信息
    getCalendarHomeWork() {
      utilJs.getMethod(
        `${global.apiurl}signCard/themeDetail?signColId=${this.clockId}&day=${
          this.curSelectDate
        }`,
        (res) => {
          this.homeWorkInfo = {
            hwId: res.headInfo.hwId || 0,
            signColId: this.clockId,
            name: res.headInfo.name || "",
            cover: res.headInfo.cover || "",
            description: res.headInfo.description || [],
            startDay:res.headInfo.startDay
          };
          this.formData()
        }
      );
    },
    //获取表单
    formData() {
      utilJs.getMethod(
        `${global.apiurl}signCard/formData/${this.curHwId}`,
        (res) => {
          this.formList = res
        })
    },
    //提交前校验
    checkSubmit() {
      let postFlag = true
      for (let i in this.formList) {
        if (this.formList[i].isRequire == 1 && (this.formList[i].value == "" || this.formList[i].value.length == 0)) {
          this.$showCjToast({
            text: "请回答第" + (i * 1 + 1) + "题",
            type: "warn",
          });
          return postFlag = false
        } else {
          postFlag = true
        }
      }
      return postFlag
    },
    clickpost() {
      console.log(this.checkSubmit())
      let that = this
      if (!this.checkSubmit()) {
         return;
      }
      if (isLoading) {
        return;
      }
      isLoading = true;
      utilJs.postMethod(
        global.apiurl + "signCard/saveFormData",
        {
          formData: this.formList,
          signColId: this.clockId,
          hwId: this.curHwId,
          startDay:this.curSelectDate,
          enableShow:this.enableShow,
          examMainId:this.examMainId
        },
        (res) => {
          localStorage.setItem(`camp${this.tlId}`, 100);
          if (this.ckFrom == global.ckFrom.camp) {
            // 记录播放进度
            let data = {
              ttId: this.ttId, //营期ID
              tpId: this.tpId, //环节ID
              tlId: this.tlId, //课时ID
              ratio: 100 //完成进度0-100
            };
            utilJs.postMethod(
              global.apiurl + "k12/trainings/progress",
              data,
              function (res) {}
            );
          }
          this.$showCjToast({
            text: "提交成功",
            type: "success",
          }).then(() => {
            isLoading = false;
            that.clickLookShortAnswerResult(res)
          });
        },
        (failRes) => {
          isLoading = false;
        })
    },
    clickLookShortAnswerResult(examMainId) {
      console.log(examMainId)
      this.$routerGo(this, "replace", {
          path: "/homePage/clockIn/shortAnswerResult",
          query: {
            clockInId: this.clockId,
            curHwId : this.curHwId,
            curSelectDate:this.curSelectDate,
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            ckFrom: this.ckFrom,
            workType:this.workType,
            examMainId:examMainId
          }
        });
    },
    //分享
    wechatShare() {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShareInfo") ? JSON.parse(localStorage.getItem("homeWorkShareInfo")) : shareIndexData;
      utilJs.wechatConfig(
        shareData.shareUrl,
        shareData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare() {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShareInfo") ? JSON.parse(localStorage.getItem("homeWorkShareInfo")) : shareIndexData;
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
    init() {
      this.curHwId = this.$route.query.curHwId;
      this.clockId = this.$route.query.clockId || "";
      this.curSelectDate = this.$route.query.curDate || "";
      this.ttId = this.$route.query.ttId || "";
      this.tpId = this.$route.query.tpId || "";
      this.tlId = this.$route.query.tlId || "";
      this.ckFrom = this.$route.query.ckFrom || "";
      this.examMainId = this.$route.query.examMainId || "";
      this.currentVideoObj = {};
      this.showVideo = false;
      this.workType = this.$route.query.workType
      this.getBaseConfig()
       if (this.curSelectDate) {
          this.getCalendarHomeWork();
        } else {
          this.getHomeWorkDatail();
        }
    }
  },
  activated() {
    setDocumentTitle("发表日记"); // eslint-disable-line
    this.init();
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-orange-linear-gradient {
  background: linear-gradient(#ff8920, #ffc26b); /* 标准的语法 */
  box-shadow: 0px 2px 8px 0px rgba(255, 141, 37, 0.5);
  border-radius: 50%;
}
.bg-blue-linear-gradient {
  background: linear-gradient(#2d8bff, #33b9ff); /* 标准的语法 */
  box-shadow: 0px 2px 8px 0px rgba(48, 159, 255, 0.5);
  border-radius: 50%;
}
</style>
